@use "sass:map";

.list-picker-root {
	flex-direction: column;
	align-items: center;

	&:not(:last-child) {
		margin-bottom: 2 * map.get($spacers, 3);
	}

	.list-picker-title {
		width: 100%;
		padding-bottom: map-get($spacers, 2);
		border-bottom: $border-default;
		margin-bottom: $block-spacer;
		font-size: 1rem;
		font-weight: bold;
	}

	.list-picker-items {
		width: 100%;

		.list-picker-item-container {
			margin-bottom: map.get($spacers, 3);

			&.inline {
				border: 0;
				display: flex;

				.list-picker-item-header {
					padding: 0;
					border: 0;
					margin: 0;
					flex: 0;
				}
			}

			&:not(.inline) {
				padding: map.get($spacers, 3) map.get($spacers, 3) 0 map.get($spacers, 3);
				border: 1px solid $link-color;

				.list-picker-item-header {
					.list-picker-item-action:first-of-type {
						margin-left: auto;
					}
				}
			}

			.list-picker-item-header {
				padding-bottom: $block-spacer;
				border-bottom: $border-default;
				margin-bottom: $block-spacer;
				display: flex;
				align-items: center;
				flex: 1;
		
				.list-picker-item-title {
					margin-bottom: 0;
				}
		
				.list-picker-item-action {
					margin-left: map.get($spacers, 2);
				}
			}
		}
	}

	.list-picker-new-button {
		margin-left: auto;
		margin-right: auto;
		width: 33.33%;
	}
}

.list-picker-root.hide-ui {
	.list-picker-item-container {
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}
	.list-picker-item-header {
		display: none !important;
	}
	.list-picker-new-button {
		display: none !important;
	}
}

.list-picker-root.horizontal {
	flex-direction: row;
	align-items: center;

	.list-picker-items {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}
